<template>
  <div style="width: 100%; height: 100%; position: relative">
    <div :id="idname" style="width: 100%; height: 100%" v-if="!isShow"></div>
    <div class="no_data" v-show="isShow">
      <img ref="img" src="@/assets/images/no_data.png" alt="" />
      <p>暂无数据</p>
    </div>
  </div>
</template>

<script>
import echarts from "echarts";
import { EleResize } from "@/utils/esresize.js";
export default {
  props: {
    idname: {
      type: String,
      required: true,
    },
    datalist: {
      type: Object,
      default: {
        legend_data: [],
        data: [],
      },
    },
  },
  data() {
    return {
      isShow: false,
    };
  },
  watch: {
    datalist: {
      handler(val, oldVal) {
        let newarr = val.data.filter((item) => item.value != 0);
        if (newarr.length != 0) {
          this.$nextTick(() => {
            this.chartColumn(1);
          });
        } else {
          this.$nextTick(() => {
            this.chartColumn(2);
          });
        }
      },
      deep: true,
    },
  },
  methods: {
    // 只适用图表方法
    drawLine(dom, option) {
      if (document.getElementById(dom)) {
        let myChart = echarts.init(document.getElementById(dom));
        let resizeDiv = document.getElementById(dom);
        myChart.clear();
        myChart.setOption(option);
        let listener = function () {
          myChart.resize();
        };
        EleResize.on(resizeDiv, listener);
      }
    },
    chartColumn(type) {
      // 折线图
      let dom = this.idname;
      let option1 = {
        title: {
          text: "总利润",
          textStyle: {
            color: "#8e8e8e",
            fontFamily: "Microsoft YaHei",
            fontSize: 16,
            fontWeight: 400,
          },
          top: "22px",
          left: "20px",
        },
        graphic: [
          {
            type: "image",
            id: "logo",
            left: "center",
            top: "120",
            bounding: "raw",
            style: {
              image: this.$refs["img"].currentSrc,
              width: 92,
              // height: 99,
              opacity: 1,
            },
          },
        ],
      };
      let option2 = {
        title: {
          text: "总利润",
          textStyle: {
            color: "#000",
            fontFamily: "Microsoft YaHei",
            fontSize: 16,
            fontWeight: 400,
          },
          top: "22px",
          left: "20px",
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c}",
        },
        legend: {
          data: this.datalist.legend_data,
          top: 22,
        },
        color: ["#20CE9C", "#F7A83E", "#F75555"],
        series: [
          {
            name: "总利润",
            type: "funnel",
            top: 80,
            //x2: 80,
            // bottom: 60,
            width: "62%",
            left: "22%",
            // minSize: "0%",
            // maxSize: "100%",
            sort: "none",
            funnelAlign: "center",
            gap: 2,
            label: {
              show: true,
              position: "inside",
              fontSize: 16,
              padding: [5, 0, 5, 0],
              formatter: "{b}\n{c}",
            },
            labelLine: {
              length: 10,
              lineStyle: {
                width: 1,
                type: "solid",
              },
            },
            itemStyle: {
              borderColor: "#fff",
              borderWidth: 1,
            },
            emphasis: {
              label: {
                fontSize: 20,
              },
            },
            data: this.datalist.data,
          },
        ],
        graphic: [
          {
            type: "text",
            z: 100,
            right: "25",
            bottom: "25",
            style: {
              fill: "#333",
              text: this.datalist.profit_rate,
              font: "16px Microsoft YaHei",
            },
          },
        ],
      };
      let option = type == 1 ? option2 : option1;
      this.drawLine(dom, option);
    },
  },
  mounted() {
    this.chartColumn();
  },
};
</script>

<style></style>
